<%--
  Created by IntelliJ IDEA.
  User: 86189
  Date: 2021/8/21
  Time: 11:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每一朵云</title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        body {
            background:#000;
        }
        .box1 {
            position:relative;
            width:100%;
            margin:0 auto;
        }
        h1 {
            text-align:center;
            color:#fff;
        }
        .zhu {
            width:200px;
            position:absolute;
            top:50px;
            left:700px;
        }
        .zhu a {
            font-size:40px;
            color:#fff;
            text-decoration:none;
            letter-spacing:15px;
        }
        .box2 {
            width:200px;
            height:300px;
            position:relative;
            margin:200px auto;
            transform-style:preserve-3d;
            animation:fn 10s;
            animation-iteration-count:infinite;
            animation-timing-function:linear;
        }
        img {
            width:300px;
            height:400px;
        }
        .box2 div {
            width:200px;
            height:300px;
            position:absolute;
            left:0;
            top:0;
        }
        .box2:hover {
            animation-play-state:paused;
        }
        .img1 {
            transform:rotateY(0deg) translateZ(485px);
        }
        .img2 {
            transform:rotateY(40deg) translateZ(485px);
        }
        .img3 {
            transform:rotateY(80deg) translateZ(485px);
        }
        .img4 {
            transform:rotateY(120deg) translateZ(485px);
        }
        .img5 {
            transform:rotateY(160deg) translateZ(485px);
        }
        .img6 {
            transform:rotateY(200deg) translateZ(485px);
        }
        .img7 {
            transform:rotateY(240deg) translateZ(485px);
        }
        .img8 {
            transform:rotateY(280deg) translateZ(485px);
        }
        .img9 {
            transform:rotateY(320deg) translateZ(485px);
        }
        @keyframes fn {
            0% {
                transform:rotateX(-15deg) rotateY(0deg);
            }
            100% {
                transform:rotateX(-15deg) rotateY(360deg);
            }
        }
    </style>
    <!--    link引入样式-->
    <link rel="stylesheet" type="text/css" href="head.css">
    <!--    link引入图标-->
    <link rel="icon" href="image/10.jpg">
</head>
<body>
<div class="box1">
    <h1>书籍推荐</h1>
    <div class="box2">
        <div class="img1">
            <img src="../images/22.jpg" alt="">
        </div>
        <div class="img2">
            <img src="../images/23.jpg" alt="">
        </div>
        <div class="img3">
            <img src="../images/24.jpg" alt="">
        </div>
        <div class="img4">
            <img src="../images/25.jpg" alt="">
        </div>
        <div class="img5">
            <img src="../images/27.jpg" alt="">
        </div>
        <div class="img6">
            <img src="../images/28.jpg" alt="">
        </div>
        <div class="img7">
            <img src="../images/29.jpg" alt="">
        </div>
        <div class="img8">
            <img src="../images/30.jpg" alt="">
        </div>
        <div class="img9">
            <img src="../images/31.jpg" alt="">
        </div>
    </div>
</div>
</body>
</html>